<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
    .bgl-yt{background-color: saddlebrown;}
    .bgl-yt div a{
      color: white;
      font-size: 12px;
      text-align: center;
      text-decoration: underline;
    }
    .bgl-yt2 div{
      padding-left: 20px;
      padding-right: 20px;
    }
    .bgl-yt3 a{
      color: black;
      font-size: 12px;
    }
    .bgl-yt4 a{
      margin-left: 15px !important;
      color: black;
    }
    .bgl-yt5 span{
      color: #8e7033;
    }
    .bgl-yt4 span{
      margin-right: 15px;
    }
    .bgl-yt8 div ul{
      list-style: none;
    }
    .bgl-yt8 div ul li img{
      margin-left: -10px;
    }
    .bgl-yt9 ul{
      list-style: none;
    }
    .bgl-yt9 ul li img{
      margin-left: -10px;
    }
    .bgl-yt10{
      height: 50px;
      text-align: center;
      margin-top: 10px;
    }
    .bgl-yt10 a{
      text-align: center;
      color: black;
      border: 1px solid black;
      padding: 12px 30px;
      text-decoration: none;
    }
    .bgl-yt10 a:hover{
      background-color: black;
      color: white;
    }
    .bgl-yt11{
      background-image: url(./img/sky-widget75-1920.101c050.jpg);
      height: 546px;
    }
    .bgl-yt11>div:first-child{
      height: 132px;
      padding: 50px 0 50px 0;
    }
    .bgl-yt11>div>h3{
      height: 32px;
      color: white;text-align: center;
      margin: auto;
    }
    .bgl-yt12>div>img{
      width: 288px;
      height: 288px;
      background-color: white;
      transform: translate(280px);
    }
    .bgl-yt13{
      margin: 60px 340px 60px 340px;
    }
    .bgl-yt14 h3{
      text-align: center;
      margin-bottom: 50px;
    }
    .bgl-yt15 ul{
      list-style: none;
    }
    .bgl-yt15 ul div li>img{
      margin-right: 30px;
      margin-bottom: 30px;
    }
    .bgl-yt15 ul div span{
      width: 56px;
      height: 18px;
      padding: 12px 30px 12px 30px;
      border: 1px solid black;
      margin: 0 137px 5px 137px;
    }
    .bgl-yt16{
      height: 75px;
      padding: 0 90px 0 90px;
      background-color: #f0ede8;
    }
    .bgl-yt16 span{
      font-size: 20px;
    }
    .bgl-yt16 div img{
      width: 30px;
      height: 30px;
      margin-top: 27px;
    }
    .bgl-yt16 div img:last-child{
      width: 56px;
      height: 30px;
    }
    .bgl-yt17{
      justify-content: space-around;
      margin-top: 50px;
    }
    .bgl-yt17 ul{
      height: 167px;
      list-style: none;
    }
    #bgllb ol li{
      width: 12px;
      height: 12px;
      background-color: rgb(77, 77, 160);
      border-radius: 50%;
    }
    #bgllb ol .active{
      background-color: orange;
    }
  </style>
</head>
<body>
  <!-- 页头 -->
<div class="bgl-yt w-100 ">
  <div>
    <a href="#" class="d-block">佳节甄选：即刻探索更多节日惊喜。</a>
  </div>
</div>
<div class="bgl-yt1 w-100 d-none d-lg-block">
  <div class="bgl-yt2 w-100">
    <div class="bgl-yt3">
    <div class="float-left mt-3">
      <a href="#">
        <img src="./img/fuwuling.png" alt="">
        <span>服务&nbsp;&nbsp;</span>
       </a>
       <a href="#">
        <img src="./img/fuwu-.png" alt="">
        <span>联系我们&nbsp;&nbsp;</span>
       </a>
       <a href="#">
        <img src="./img/sousuo.png" alt="">
        <div class="float-right pl-1 pt-2"><input type="text" placeholder="&nbsp;&nbsp;搜索" class="border-left-0 border-top-0 border-right-0"></div>
       </a>
      </div>
      <div class="float-right mt-3">
        <span>
          <img src="./img/huiyuandenglu.png" alt="">
          <a href="#">登录</a>
          <span>/</span>
          <a href="#">注册</a>
        </span>
        <a href="#">
          <img src="./img/aixin.png" alt="">
          <span>我的愿望清单 (0)</span>
        </a>
        <a href="#">
          <img src="./img/24gl-bag.png" alt="">
          <span>购物袋 (0)</span>
        </a>
      </div>
    </div>
    </div>
  </div>
  <div>
    <div><h1 class="display-4 font-weight-normal text-center">B&nbsp;V&nbsp;L&nbsp;G&nbsp;A&nbsp;R&nbsp;I</h1></div>
  </div>
  <div class="bgl-yt4 text-center mb-2 d-none d-lg-block">
    <div class="bgl-yt5 float-none d-inline">
      <img src="./img/ico-star.png" alt="">
      <span>佳节</span>
    </div>
    <a href="#">在线精选推荐</a>
    <a href="#">高级珠宝</a>
    <span>珠宝</span>
    <span>订婚戒指和婚戒</span>
    <span>腕表</span>
    <span>包袋与配饰</span>
    <span>礼物</span>
    <span>香水</span>
    <span>BVLGARI品牌</span>
    <a href="#">故事</a>
    <a href="#">宝格丽酒店与度假村</a>
  </div>
  <div class="bgl-yt6">
        <img src="./img/01.jpg" alt="" class="w-100">
  </div>
<div>
  <h4 class="text-center">梦想之作</h4>
</div>
<div class="bgl-yt8">    
  <div class="container">
    <ul class="row">
      <li class="clo-sm-12 col-md-4">
        <img src="./img/310x310_2_6.jpg" alt="" class="w-100">
        <div class="text-center">腕表</div>
      </li>
      <li class="clo-sm-12 col-md-4">
        <img src="./img/310x310_3_5.jpg" alt="" class="w-100">
        <div class="text-center">珠宝</div>
      </li>
      <li class="clo-sm-12 col-md-4">
        <img src="./img/310x310_4_5.jpg" alt="" class="w-100">
        <div class="text-center">手袋</div>
      </li>
    </ul>
  </div>
</div>
<div class="text-center">
  <h3 class="mb-3">正在寻找心仪佳礼？</h3>
  <span class="mb-2 d-inline-block">回答问题，为挚爱找寻心仪的定制礼物。</span>
</div>
<div class="d-flex bgl-yt9">
  <ul class="row">
    <li class="float-left clo-sm-12 col-md-4"><img src="./img/05.jpg" alt="" class="w-100"></li>
    <li class="float-left clo-sm-12 col-md-4"><img src="./img/06.jpg" alt="" class="w-100"></li>
    <li class="float-left clo-sm-12 col-md-4"><img src="./img/07.jpg" alt="" class="w-100"></li>
  </ul>
</div>
<div class="bgl-yt10">
  <a href="#">即刻开始</a>
</div>
<div class="bgl-yt11 d-none d-xl-block">
  <div>
    <h3>为你甄选</h3>
  </div>
  <div id="bgllb" class="carousel slide w-75   m-auto" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#bgllb" data-slide-to="0" class="active"></li>
      <li data-target="#bgllb" data-slide-to="1"></li>
      <li data-target="#bgllb" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner bgl-yt12">
      <div class="carousel-item active">
        <img src="./img/1.png" alt="">
        <img src="./img/2.png" alt="">
        <img src="./img/3.png" alt="">
      </div>
      <div class="carousel-item">
        <img src="./img/4.png" alt="">
        <img src="./img/5.png" alt="">
        <img src="./img/6.png" alt="">
      </div>
      <div class="carousel-item">
        <img src="./img/7.png" alt="">
        <img src="./img/8.png" alt="">
        <img src="./img/9.png" alt="">
      </div>
    </div>
    <a class="carousel-control-prev" data-target="#bgllb" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next"  data-target="#bgllb" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
    </div>
  </div>
</div>
<div class="bgl-yt13 d-none d-xl-block">
  <div class="bgl-yt14">
    <h3>专属服务，助您梦想成真。</h3>
  <div class="bgl-yt15">
    <ul class="d-flex">
      <div class="float-left">
      <li><img src="./img/11_.jpg" alt=""></li>
      <span>免费配送</span>
      </div>
      <div class="float-left">
      <li><img src="./img/12_.jpg" alt=""></li>
      <span>节日贺卡</span>
      </div>
      <div class="float-left">
      <li><img src="./img/13_.jpg" alt=""></li>
      <span>礼品包装</span>
      </div>
    </ul>
  </div>
  </div>
</div>
<div class="bgl-yt16">
  <span>社交网站</span>
  <div class="float-right">
  <img src="./img/weixin.png" alt="">
  <img src="./img/weibo.png" alt="">
  <img src="./img/dy.png" alt="">
  <img src="./img/3-new.png" alt="">
  <img src="./img/5 (1).png" alt="">
</div>
</div>
<div class="bgl-yt17 d-flex">
  <ul class="float-left">
    <h5>服务</h5>
    <li>联系我们</li>
    <li>常见问题</li>
    <li>客户关怀</li>
  </ul>
  <ul class="float-left">
    <h5>关于宝格丽</h5>
    <li>企业社会责任</li>
    <li>关于BVLGARI</li>
    <li>宝格丽酒店</li>
  </ul>
  <ul class="float-left">
    <h5>隐私政策</h5>
    <li>COOKIES管理</li>
    <li>隐私政策</li>
  </ul>
  <ul class="float-left">
    <h5>法律条款</h5>
    <li>网站使用条款</li>
    <li>通用条款</li>
  </ul>
</div>
</body>
</html>